<template>
  <el-container>
    <el-header><h2>环境监测</h2></el-header>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>土质数据</h3>
        </div>
        <div class="text item">
          <el-table :data="soilList">
            <el-table-column label="时间" prop="timestamp.timeString"></el-table-column>
            <el-table-column label="钾含量[mg/L]" prop="kPercent"></el-table-column>
            <el-table-column label="氮含量[mg/L]" prop="nPercent"></el-table-column>
            <el-table-column label="磷含量[mg/L]" prop="pPercent"></el-table-column>
            <el-table-column label="含水率" prop="waterPercent"></el-table-column>
            <el-table-column label="pH值" prop="ph"></el-table-column>
            <el-table-column label="温度" prop="temperature"></el-table-column>
          </el-table>
          <el-pagination
              :current-page.sync="soilData.page"
              :page-size.sync="soilData.size"
              :total="total"
              background
              layout="prev, pager, next,jumper"
              @current-change="soilDatapage"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import {querySoilData} from "../../../network/environmentApi";

export default {
  name: "SoilData",
  data() {
    return {
      soilData: {
        page: 1,
        size: 10,
        start: null,
        end: null
      },
      soilList: [],
      total: 0,
    }
  },
  methods: {
    soilDatapage() {
      querySoilData(this.soilData).then(res => {
        // console.log(res);
        this.soilList = res.data.records;
        this.total = res.data.total;
      })
    },
  },
  mounted() {
    this.soilDatapage();
  },
}
</script>

<style scoped>
</style>